<template>
	<view class="content">
		<!-- 顶图 -->
		<view class="top-slider store-slider">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/temp-topAd.webp" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/temp-vipAd.webp" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="wiper-item-info">
				<view class="item-number"><text class="current-number">1</text>/100</view>
			</view>
		</view>
		<view class="whereToGo-detail-content">
			<!-- 头部卡 -->
			<view class="store-card">
				<view class="item-info">
					<view class="store-tag-list">
						<text class="store-tag strong-tag">烟酒店</text>
					</view>
					<view class="name">
						<text>黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</text>
						<icon type="" class="imgIcon icon-tobacco"/>
					</view>
					<view class="info-item">
						<view class="popularity-number">人气: 9999</view>
						<h-com-star></h-com-star>
						<view class="price-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 | <icon type="" class="fontIcon icon-address"/>9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
				<view class="wrap-buttons">
					<button class="bormal-btn btn-store-check">
						<icon style="" class="fontIcon icon-store-check"/>聚集地打卡
					</button>
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="store-contact-info">
				<icon style="" class="fontIcon icon-address"/>
				<view class="address">西安华贸丽思卡尔顿酒店一层及地下一二层西安华贸丽思卡尔顿酒店一层及地下一二层</view>
				<button class="btn-call-store">
					<icon style="" class="fontIcon icon-call"/>
					<text>电话</text>
				</button>
			</view>

			<!-- 商品列表 -->
			<view class="item-card-list two-column">
				<view class="list-header-bar">
					<icon type="" class="fontIcon icon-shop-item"/>
					<view class="header-title">本地人气排行</view>
					<view class="header-buttons">
						<button class="btn-goto">全部<icon type="" class="fontIcon icon-goto"/></button>
					</view>
				</view>
				<view class="item-card">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="item-bottom-bar">
						<view class="item-name">老锦江雪茄吧</view>
						<view class="item-desc">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
						<view class="item-price">
							<text class="now-price">¥100</text>
							<text class="old-price">¥50</text>
						</view>
					</view>
				</view>
				<view class="item-card">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="item-bottom-bar">
						<view class="item-name">老锦江雪茄吧</view>
						<view class="item-desc">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
						<view class="item-price">
							<text class="now-price">¥100</text>
							<text class="old-price">¥50</text>
						</view>
					</view>
				</view>
				<view class="item-card">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="item-bottom-bar">
						<view class="item-name">老锦江雪茄吧</view>
						<view class="item-desc">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
						<view class="item-price">
							<text class="now-price">¥100</text>
							<text class="old-price">¥50</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="item-card-list">
				<view class="list-header-bar">
					<icon type="" class="fontIcon icon-shop-item"/>
					<view class="header-title">本地人气排行</view>
					<view class="header-buttons">
						<button class="btn-goto">全部<icon type="" class="fontIcon icon-goto"/></button>
					</view>
				</view>
				<view class="item-card">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="item-bottom-bar">
						<view class="item-name">老锦江雪茄吧</view>
						<view class="item-desc">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
						<view class="item-price">
							<text class="now-price">¥100</text>
							<text class="old-price">¥50</text>
						</view>
					</view>
				</view>
				<view class="item-card">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="item-bottom-bar">
						<view class="item-name">老锦江雪茄吧</view>
						<view class="item-desc">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
						<view class="item-price">
							<text class="now-price">¥100</text>
							<text class="old-price">¥50</text>
						</view>
					</view>
				</view>
				<view class="item-card">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="item-bottom-bar">
						<view class="item-name">老锦江雪茄吧</view>
						<view class="item-desc">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
						<view class="item-price">
							<text class="now-price">¥100</text>
							<text class="old-price">¥50</text>
						</view>
					</view>
				</view>
				<view class="item-card">
					<view class="preview-img">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
					<view class="item-bottom-bar">
						<view class="item-name">老锦江雪茄吧</view>
						<view class="item-desc">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
						<view class="item-price">
							<text class="now-price">¥100</text>
							<text class="old-price">¥50</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论区 -->
		<view class="content-comment">
			<!-- 评论头部 -->
			<view class="comment-head">
				<text class="comment-title">所有评论</text>
				<view class="comment-sort">
					<button class="sort-button selected">最热</button>
					<button class="sort-button">最新</button>
				</view>
			</view>
			<!-- 评论列表 -->
			<view class="comment-list">
				<view class="content-empty empty-comment-bg">
					评论空空，期待你的留言
				</view>
				<!-- 列表项目 -->
				<view class="comment-list-item">
					<!-- 用户信息 -->
					<view class="account-info vip">
						<!-- 用户头像 -->
						<view class="account-head">
							<!-- 头像图片容器 -->
							<view class="account-head-img">
								<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
							</view>
							<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
							<icon type="" class="account-hat hat-appreciation"></icon>
						</view>
						<!-- 文字和图标信息 -->
						<view class="account-info-content">
							<!-- 基础信息 -->
							<view class="base-info">
								<text class="account-nickName">用户名甲乙丙丁戊己</text>
								<text class="writer-sign">作者</text>
								<view class="account-level"><text>999</text></view>
								<!-- 男性 -->
								<icon type="" class="imgIcon icon-male"></icon>
								<!-- 女性 -->
								<icon type="" class="imgIcon icon-female"></icon>
							</view>
							<!-- 附加信息 -->
							<view class="plus-info">
								<!-- VIP铭牌 -->
								<text class="account-nameplate">22</text>
								<!-- SVIP铭牌 -->
								<!-- <text class="account-nameplate">22</text> -->
								<!-- 店铺 -->
								<icon type="" class="imgIcon icon-store"></icon>
								<!-- 品牌 -->
								<icon type="" class="imgIcon icon-brand"></icon>
								<!-- 认证 -->
								<icon type="" class="imgIcon icon-tobacco"></icon>
								<!-- 鉴赏家 -->
								<icon type="" class="imgIcon icon-evaluation"></icon>
							</view>
							<!-- 时间 -->
							<view class="time-info">
								<text>2019-11-12 10:21:10</text>
							</view>
						</view>
						<!-- 功能 -->
						<view class="post-head-actions">
							<!-- 帖子点赞 -->
							<!-- 自己已经点赞过就加样式thumbs-selected，如果取消点赞，就去掉这个样式 -->
							<!-- 没有人点赞过数字为空就可以 -->
							<!-- 数字位数不能超过3个，如果超过，显示+ -->
							<view class="wrap-thumbs thumbs-selected">
								<icon type="" class="fontIcon icon-thumbs"></icon>
								<text class="like-number">999+</text>
							</view>
						</view>
					</view>
					<!-- 评论内容 -->
					<view class="comment-item-content">
						<text>店里环境非常好，唱歌气氛非常嗨，极力推荐啊！！！</text>
						<view class="store-comment-tag-list">
							<text class="store-comment-tag">
								<icon type="" class="fontIcon icon-thumbs"/>
								普洱茶
							</text>
							<text class="store-comment-tag">
								<icon type="" class="fontIcon icon-thumbs"/>
								名字很长很长的商品名
							</text>
						</view>
						<view class="img-grid tetrad">
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<button class="comment-item-more">还有2条回复 &gt;</button>
					</view>
				</view>
			</view>
			<view class="noMore-content">
				- 没有个更多评论了 -
			</view>
		</view>
		<!-- 底栏 -->
		<view class="footBar foot-common-content">
			<view class="commentBar">
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-comment"></icon>
					<text>1.2W</text>
				</view>
				<input class="footBar-input" focus placeholder="友善的发言更受欢迎～" />
				<view class="commentBar-btn btn-selected">
					<icon type="" class="fontIcon icon-rate"></icon>
					<text>5</text>
				</view>
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-collect"></icon>
					<text>收藏</text>
				</view>
				<view class="commentBar-btn">
					<icon type="" class="fontIcon icon-share"></icon>
					<text>分享</text>
				</view>
			</view>
		</view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block half"></view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            background: ['color1', 'color2', 'color3'],
	            indicatorDots: false,
	            autoplay: true,
	            interval: 2000,
	            duration: 500
	        }
	    },
	    methods: {
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        }
	    }
	}
</script>
